<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>detail.json</title>
    <style>
 /* 设置整个页面的字体和边距 */
body {
  font-family: Arial, sans-serif; /* 使用Arial字体，如果没有则使用无衬线字体 */
  margin: 0; /* 移除默认的边距 */
  padding: 0; /* 移除默认的内边距 */
}

/* 头部区域样式 */
.header {
  background-color: #f8f8f8; /* 背景颜色 */
  padding: 10px; /* 内边距 */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: space-between; /* 子项分散对齐 */
  align-items: center; /* 子项垂直居中 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
}

/* Logo区域样式 */
.logo {
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 子项垂直居中 */
}

/* Logo图片样式 */
.logo img {
  height: 40px; /* 图片高度 */
  margin-right: 10px; /* 图片右侧外边距 */
}

/* 搜索栏样式 */
.search-bar {
  flex-grow: 1; /* 允许搜索栏占据额外空间 */
  margin: 0 20px; /* 左右外边距 */
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 子项垂直居中 */
}

/* 搜索栏输入框样式 */
.search-bar input[type="text"] {
  padding: 10px; /* 内边距 */
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 4px; /* 边框圆角 */
  width: 100%; /* 宽度100% */
}

/* 搜索栏按钮样式 */
.search-bar button {
  padding: 10px; /* 内边距 */
  margin-left: 10px; /* 左侧外边距 */
  background-color: #ffd700; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}

/* 导航菜单样式 */
.nav {
  display: flex; /* 使用弹性盒子布局 */
  list-style: none; /* 无列表样式 */
}

/* 导航菜单项样式 */
.nav li {
  margin: 0 15px; /* 左右外边距 */
}

/* 导航菜单链接样式 */
.nav li a {
  text-decoration: none; /* 无下划线 */
  color: #333; /* 文字颜色 */
}
.nav button {
  padding: 10px; /* 内边距 */
  margin-left: 10px; /* 左侧外边距 */
  background-color: #ffd700; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}
/* 页面包裹器样式，用于居中和隐藏溢出的内容 */
#wrap {
  width: 1920px; /* 宽度 */
  margin: 0 auto; /* 居中显示 */
  overflow: hidden; /* 隐藏溢出内容 */
}

/* 侧边导航样式 */
#nav {
  width: 60px; /* 宽度 */
  background-color: #f8f8f8; /* 背景颜色 */
  position: fixed; /* 固定定位 */
  top: 91px; /* 距离顶部80px */
  height: calc(100% - 80px); /* 高度为视口高度减去80px */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 子项水平居中 */
}

/* 侧边导航链接样式 */
#nav a {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 宽度100% */
  height: 60px; /* 高度60px */
  text-decoration: none; /* 去除下划线 */
  color: #333; /* 文字颜色 */
  margin: 5px 0; /* 上下外边距为5px */
}

/* 侧边导航链接悬停样式 */
#nav a:hover {
  background-color: #e0e0e0; /* 鼠标悬停时背景颜色 */
}

/* 侧边导航激活链接样式 */
#nav a.active {
  background-color: #ffd700; /* 激活时背景颜色 */
}

/* 侧边导航图片样式 */
#nav img {
  width: 24px; /* 图片宽度 */
  height: 24px; /* 图片高度 */
  margin-right: 10px; /* 图片右侧外边距 */
}

/* 车辆类型容器样式 */
.vehicle-types-container {
  text-align: center; /* 文字居中对齐 */
  margin-top: 20px; /* 与上一个元素保持20px的距离 */
}

/* 主要内容区域样式 */
#main {
  width: 900px; /* 宽度 */
  display: inline-flex; /* 内联弹性布局 */
  list-style: none; /* 无列表样式 */
  padding: 0; /* 移除内边距 */
}

/* 主要内容区域列表项样式 */
#main li {
  margin-right: 7px; /* 右侧外边距 */
  text-align: center; /* 文字居中对齐 */
}

/* 主要内容区域图片样式 */
#main img {
  width: 50px; /* 宽度 */
  height: 18px; /* 高度 */
}

/* 主要内容区域段落样式 */
#main span {
  display: block; /* 块级元素显示，使其占据整行 */
  margin-top: 5px; /* 与图片保持5px的距离 */
}

/* 选择车辆容器样式 */
.select-vehicle {
  margin: 20px; /* 四周保持20px的距离 */
  text-align: center; /* 文字居中对齐 */
}

/* 选择车辆下拉框和按钮样式 */
.select-vehicle select,
.select-vehicle button {
  padding: 5px; /* 内边距为5px */
  margin-right: 10px; /* 右侧保持10px的距离 */
}

/* 广告区域样式 */
#ad {
  height: 60px; /* 高度 */
  clear: both; /* 清除浮动 */
}

/* 侧边栏样式 */
#aside {
  width: 400px; /* 宽度 */
}
        /* 容器样式 */
.container {
  position: absolute; /* 绝对定位 */
  top: 71%; /* 距离顶部69% */
  left: 51%; /* 距离左侧51% */
  transform: translate(-50%, -50%); /* 利用变换使容器居中 */
  width: 650px; /* 宽度 */
  padding: 20px; /* 内边距 */
  background-color: white; /* 背景颜色 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-radius: 8px; /* 边框圆角 */
  width: 95%; /* 宽度90% */
  margin: 80px auto; /* 上下外边距80px，水平居中 */
  background-color: #fff; /* 背景颜色 */
  padding: 20px; /* 内边距 */
}

/* 容器内标题样式 */
.container h2 {
  text-align: center; /* 文字居中 */
  margin-bottom: 20px; /* 底部外边距 */
}

/* 表单组样式 */
.form-group {
  margin-bottom: 15px; /* 底部外边距 */
}

/* 表单组标签样式 */
.form-group label {
  display: block; /* 块级元素显示 */
  margin-bottom: 5px; /* 底部外边距 */
}

/* 表单组输入框样式 */
.form-group input {
  width: 100%; /* 宽度100% */
  padding: 8px; /* 内边距 */
  box-sizing: border-box; /* 边框盒模型 */
}

/* 表单组按钮样式 */
.form-group button {
  width: 100%; /* 宽度100% */
  padding: 10px; /* 内边距 */
  background-color: #ddc019; /* 背景颜色 */
  color: white; /* 文字颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}

/* 表单组按钮悬停样式 */
.form-group button:hover {
  background-color: #ddc019; /* 鼠标悬停时背景颜色 */
}

/* 容器样式（重复，可以删除或合并） */
.container {
  width: 90%; /* 宽度90% */
  margin: 80px auto; /* 上下外边距80px，水平居中 */
  background-color: #fff; /* 背景颜色 */
  padding: 20px; /* 内边距 */
}

/* 车辆图片样式 */
.vehicle-images img {
  width: 100%; /* 宽度100% */
  max-width: 600px; /* 最大宽度600px */
  height: auto; /* 高度自适应 */
  display: block; /* 块级元素显示 */
  margin: 0 auto; /* 水平居中 */
}

/* 车辆信息样式 */
.vehicle-info {
  text-align: center; /* 文字居中 */
  margin-top: 20px; /* 顶部外边距 */
}

/* 车辆信息标题样式 */
.vehicle-info h1 {
  margin: 0; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
  font-size: 2.5em; /* 字体大小 */
}

/* 车辆信息段落样式 */
.vehicle-info p {
  font-size: 1.2em; /* 字体大小 */
  color: #555; /* 文字颜色 */
}

/* 车辆价格样式 */
.vehicle-price {
  font-size: 1.5em; /* 字体大小 */
  color: #ff5722; /* 文字颜色 */
  margin: 20px 0; /* 上下外边距 */
}

/* 车辆规格样式 */
.vehicle-specs {
  margin-top: 20px; /* 顶部外边距 */
  text-align: left; /* 文字左对齐 */
}

/* 车辆规格列表样式 */
.vehicle-specs ul {
  list-style-type: none; /* 无列表样式 */
  padding: 0; /* 移除内边距 */
}

/* 车辆规格列表项样式 */
.vehicle-specs ul li {
  background: no-repeat left center; /* 背景图不重复，左对齐，垂直居中 */
  padding-left: 20px; /* 左侧内边距 */
  margin: 10px 0; /* 上下外边距 */
  font-size: 1.1em; /* 字体大小 */
}

/* 联系房东按钮样式 */
.btn-contact-landlord {
  background-color: #0d6efd; /* 背景颜色 */
  color: white; /* 文字颜色 */
  padding: 10px 20px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 边框圆角 */
  font-size: 16px; /* 字体大小 */
  cursor: pointer; /* 鼠标手型 */
}

/* 联系房东按钮悬停样式 */
.btn-contact-landlord:hover {
  background-color: #0b5ed7; /* 鼠标悬停时背景颜色 */
}
</style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="./img/logo.png" alt="懂车帝 Logo">
            <select>
                <option>大连</option>
                <option>鞍山</option>
                <option>阜新</option>
                <option>葫芦岛</option>
                <option>沈阳</option>
            </select>
        </div>
        <div class="search-bar">
            <input type="text" placeholder="奔驰">
            <button>搜索</button>
        </div>
        <ul class="nav">
            <li><a href="#">业务合作</a></li>
            <li><a href="#">添加到桌面</a></li>
            <li><a href="#">小程序</a></li>
            <li><a href="#">下载App</a></li>
            <li><a href="#">发布作品</a></li>
            <li><a href="./register.html"><button>登录</button></a></li>
        </ul>
    </div>
    <div id="warp">
    <div id="nav">
      <a href="./INDEX.html">
      <img src="./img/homepage.png" >
      <span>首页</span>
  </a>
  <a href="./detail.html" class="active">
      <img src="./img/selection.png" >
      <span>选车</span>
  </a>
  <a href="#">
      <img src="./img/used.png">
      <span>二手车</span>
  </a>
  <a href="#">
      <img src="./img/video.png">
      <span>视频</span>
  </a>
  <a href="#">
      <img src="./img/advice.png">
      <span>资讯</span>
  </a>
  <a href="#">
      <img src="./img/circle.png">
      <span>车友圈</span>
  </a>
  <a href="Ranking list.html">
      <img src="./img/the charts.png">
      <span>排行榜</span>
  </a>
  <a href="#">
      <img src="./img/broadcast.png">
      <span>直播</span>
  </a>
  <a href="#">
      <img src="./img/tool.png">
      <span>工具</span>
  </a>
  <a href="register.html">
      <img src="./img/my.png">
      <span>我的</span>
  </a>
  <a href="#">
    <img src="./img/tool2.png" >
    <span>反馈</span>
</a>
    </div>

    <div class="container">
        <div class="vehicle-images">
            <img src="./img/dodge.jpg" >
        </div>
        <div class="vehicle-info">
            <h1>道奇地狱猫</h1>
            <p>奇挑战者SRT是道奇挑战者系列中的高性能版本，其中最著名的当属Hellcat（地狱猫）版本</p>
            <div class="vehicle-price">价格: ¥800,000</div>
        </div>
        <div class="vehicle-specs">
            <h2>车辆规格</h2>
            <ul>
                <li>发动机: 6.2L V8机械增压发动机</li>
                <li>最大马力: 717匹</li>
                <li>最大扭矩: 450Nm</li>
                <li>变速箱: 8速手自一体变速箱</li>
                <li>驱动方式: 后驱</li>
                <li>燃油类型: 汽油</li>
                <li>座位数: 2</li>
                <li>行李厢容积:458.7L</li>
            </ul>
            <a href="./register.html">
            <button class="btn-contact-landlord">联系车主</button>
          </a>
        </div>
    </div>
</div>
</body>
</html>